<template>
  <div class="wrap">
    <el-dialog
      title="新增地址"
      :visible.sync="addressFormVisible"
      width="600px"
      lock-scroll
      :append-to-body="true"
      v-loading="addressLoading"
      :destroy-on-close="true"
      @close="closeMaintenance('addressData')"
    >
      <div class="win-warp" style="height: 300px;">
        <el-form
          :model="addressData"
          ref="addressData"
          :rules="maintenanceRules"
          label-width="120px"
        >
          <el-form-item label="故障区域" prop="areaName">
            <el-cascader
              size="small"
              ref="cascaderArea"
              :options="areaList"
              clearable
              style="width: 320px"
              filterable
              :props="proppp"
              @change="getArea"
              v-model="areaIds"
            />
          </el-form-item>
          <el-form-item label="详细地址" prop="addressDetail">
            <el-input
              v-model="addressData.addressDetail"
              style="width: 320px"
              maxlength="100"
              size="small"
            ></el-input>
          </el-form-item>

          <el-form-item label="报修人" prop="userName">
            <el-input size="small"    style="width: 320px" v-model="addressData.userName" maxlength="50"></el-input>
          </el-form-item>

          <el-form-item label="联系电话" prop="phone">
            <el-input size="small"    style="width: 320px" v-model="addressData.phone"></el-input>
          </el-form-item>

          <el-form-item label>
            <el-checkbox v-model="addressData.ifCommon" true-label="1" false-label="0">设置为默认地址</el-checkbox>
          </el-form-item>
        </el-form>
      </div>
      <div class="dialog-footer">
        <el-button @click="addressFormVisible=false">取 消</el-button>
        <el-button type="primary" @click="editMaintenanceData('addressData')">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { repairBigfixCheckApi } from "@/api/repair/repairBigfixCheck";
import Token from "@/itsoftUI/auth/token.js";
import { catalogueApi } from "@/api/repair/index";
import { validateEmail, validateMobile } from "@/itsoftUI/utils/validate";
import { userCommonAddressApi } from "@/api/repair/userCommonAddress";
export default {
  props: {},
  data() {
    return {
      addressFormVisible: false,
      addressLoading: false,
      areaList: [], //维修区域
      areaIds: "",
      checked: "",
      proppp: {
        value: "id",
        label: "name",
      },
      fileList: [],
      form: {},
      limitNum: 6,
      Imgdata: { system: "repair" },
      fileVOS: [],
      byrepairList: [],
      addressData: {
        areaName: "", //维修区域
        addressDetail: "",
        userName: "",
        phone: "",
        ifCommon: "0",
      },
      maintenanceRules: {
        areaName: [
          { required: true, message: "请选择故障区域", trigger: "change" },
        ],
        addressDetail: [
          { required: true, message: "请填写详细地址", trigger: "change" },
        ],
        userName: [
          { required: true, message: "请填写报修人", trigger: "change" },
        ],
        phone: [{ required: true, validator: validateMobile }],
      },
    };
  },
  methods: {
    //新增选中
    selectActive(val) {
      this.$emit("selectActive", val);
    },
    cencaLLoading() {
      this.$emit("cencaLLoading");
    },
    //获取区域
    funLoadArea() {
      catalogueApi.GetAreaTree().then((res) => {
        if (res.status == "success") {
          this.areaList = res.data;
        }
      });
    },
    //维修区域change事件
    getArea(val) {
      let areaId = val[val.length - 1];
      this.addressData.areaId = areaId;
      this.areaId = areaId;
      this.addressData.areaName = this.$refs["cascaderArea"]
        .getCheckedNodes()[0]
        .pathLabels.join("/");
      catalogueApi.GetProjectByAreaId(areaId).then((res) => {
        if (res.status == "success") {
          this.projectList = res.data;
        }
      });
    },
    getAddressData() {
      this.$emit("getAddressData");
    },
    //保存
    editMaintenanceData(maintenanceData) {
      this.addressLoading = true;
      this.$refs[maintenanceData].validate((valid) => {
        if (valid) {
          userCommonAddressApi
            .Save(JSON.stringify(this.addressData))
            .then((res) => {
              if (res.status == "success") {
                this.addressFormVisible = false;
                this.addressLoading = false;
                this.getAddressData();
                this.selectActive(res.data);
                this.$message.success("保存成功");
              }
            });
        } else {
          this.addressLoading = false;
        }
      });
    },

    funGetUserByAreaIdAndProjectId(areaId, projectId) {
      catalogueApi
        .GetUserByAreaIdAndProjectId(areaId, projectId)
        .then((res) => {
          if (res.status == "success") {
            this.byrepairList = res.data;
          }
        });
    },
    closeMaintenance(addressData) {
      this.$refs[addressData].resetFields();
      // this.addressData = {};
      this.addressData.areaName = "";
      this.addressData.addressDetail = "";
      this.addressData.ifCommon = "0";

      this.areaIds = [];
      this.cencaLLoading();
    },
  },
  created() {
    this.funLoadArea();
  },
};
</script>

<style lang="scss" scoped>
</style>